<template>
  <ALayout class="basic-layout">
    <!-- 手机端遮罩层 -->
    <div 
      v-if="!collapsed && isMobile" 
      class="mobile-mask" 
      @click="appStore.toggleCollapsed()"
    ></div>

    <!-- 侧边栏 - 双栏布局 -->
    <ALayoutSider
      v-model:collapsed="collapsed"
      :trigger="null"
      collapsible
      :width="siderWidth"
      :collapsed-width="80"
      :class="['layout-sider', { 'mobile-show': !collapsed && isMobile }]"
    >
      <Logo :collapsed="collapsed" />
      <Sidebar />
    </ALayoutSider>

    <ALayout>
      <!-- 头部 -->
      <ALayoutHeader class="layout-header">
        <Header />
      </ALayoutHeader>

      <!-- 标签栏 -->
      <TabBar v-if="appStore.showTabs" />

      <!-- 内容区域 -->
      <ALayoutContent :class="['layout-content', { 'has-tabs': appStore.showTabs }]">
        <div class="content-wrapper">
          <RouterView v-slot="{ Component, route }">
            <!-- 始终保留 KeepAlive，避免在非 keepAlive 页面时销毁缓存实例 -->
            <KeepAlive :include="tabsStore.cachedViews">
              <component :is="Component" :key="route.name" />
            </KeepAlive>
          </RouterView>
        </div>
      </ALayoutContent>
    </ALayout>
  </ALayout>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { Layout as ALayout } from 'ant-design-vue'
import Logo from './components/Logo.vue'
import Header from './components/Header.vue'
import Sidebar from './components/Sidebar.vue'
import TabBar from './components/TabBar.vue'
import { useAppStore, useTabsStore } from '@/store'
import { storeToRefs } from 'pinia'

const ALayoutSider = ALayout.Sider
const ALayoutHeader = ALayout.Header
const ALayoutContent = ALayout.Content

const appStore = useAppStore()
const tabsStore = useTabsStore()
const { collapsed } = storeToRefs(appStore)

// 计算侧边栏宽度
const siderWidth = computed(() => {
  if (collapsed.value) {
    return 80
  }
  return appStore.showSubMenu ? 240 : 80
})

// 检测是否为移动端
const isMobile = ref(false)

const checkIsMobile = () => {
  isMobile.value = window.innerWidth <= 768
  // 在手机端默认折叠菜单
  if (isMobile.value && !collapsed.value) {
    appStore.toggleCollapsed()
  }
}

onMounted(() => {
  checkIsMobile()
  window.addEventListener('resize', checkIsMobile)
})

onUnmounted(() => {
  window.removeEventListener('resize', checkIsMobile)
})
</script>

<style lang="scss" scoped>
.basic-layout {
  width: 100%;
  height: 100vh;
  --sider-width: v-bind('siderWidth + "px"');

  .layout-sider {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    height: 100vh;
    overflow: auto;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
    z-index: 100;
    transition: width 0.3s;

    :deep(.ant-layout-sider-children) {
      display: flex;
      flex-direction: column;
    }
  }

  .layout-header {
    position: fixed;
    top: 0;
    right: 0;
    left: var(--sider-width, 240px);
    height: 64px;
    padding: 0;
    background: var(--header-bg);
    box-shadow: 0 1px 4px var(--shadow-color);
    z-index: 99;
    transition: left 0.3s;
  }

  .layout-content {
    margin-top: 64px;
    margin-left: var(--sider-width, 240px);
    min-height: calc(100vh - 64px);
    background: var(--bg-color-secondary);
    transition: margin-left 0.3s, margin-top 0.2s;

    .content-wrapper {
      margin: 16px;
      // padding: 24px;
      // background: var(--content-bg);
      min-height: calc(100vh - 128px);
    }

    // 显示标签栏时调整内容区域
    &.has-tabs {
      margin-top: 104px;
      min-height: calc(100vh - 104px);

      .content-wrapper {
        min-height: calc(100vh - 168px);
      }
    }
  }
}


// 手机端遮罩层
.mobile-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 999;
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

// 手机端适配
@media screen and (max-width: 768px) {
  .basic-layout {
    // 手机端也根据是否有子菜单动态调整宽度
    --sider-width: v-bind('siderWidth + "px"');

    .layout-sider {
      position: fixed;
      left: calc(-1 * var(--sider-width));
      top: 0;
      bottom: 0;
      height: 100vh;
      width: var(--sider-width) !important;
      max-width: var(--sider-width) !important;
      z-index: 1000;
      transition: left 0.3s, width 0.3s;

      &.mobile-show {
        left: 0;
      }
    }

    .layout-header {
      left: 0 !important;
    }

    .layout-content {
      margin-left: 0 !important;

      .content-wrapper {
        margin: 8px;
        padding: 12px;
        min-height: calc(100vh - 96px);
      }

      &.has-tabs .content-wrapper {
        min-height: calc(100vh - 136px);
      }
    }
  }

  // 移动端不需要折叠宽度效果
  :deep(.ant-layout-sider-collapsed) {
    & ~ .ant-layout {
      .layout-header {
        left: 0 !important;
      }

      .layout-content {
        margin-left: 0 !important;
      }
    }
  }
}

// 过渡动画
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.2s;
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(-10px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(10px);
}
</style>
